<template>
	<view>
		<!-- <button @click="chooseImage">选择照片</button> -->
		<!-- 增加水印 -->
		<hpy-watermark ref="watermark" @waterMark="waterMark"></hpy-watermark>
		<view class="img-out">
			<view class="img-list" v-for="(item, index) in imageList" :key="index">
				<view class="img-close" @click="imgClose(index)"><i class="iconfont icon-x"></i></view>
				<image :src="item"  @click="imgPreview(index)" class="img_st"></image>
			</view>
			<view class="img-list img-list-add" @click="chooseImage" v-if="img_list_type">
				<i class="iconfont icon-shumajiadian" ></i>
			</view>
		</view> 
	</view>
</template>

<script>
	
import {getuplodFile} from '@/common/api/job/commit.js'	
import {getUserInfo} from '@/common/api/job/jobapi.js'
	export default {
		props:{
			heards: {
				default: {'Access-Token':uni.getStorageSync('token')}
			},
			action: {
				default: 'http://192.168.1.2:8000/uploadFile'
			},
			echodata: {
				default: '',
			},
			citys: {
				default: ''
			},
			customer: {
				default:''
			}
		},
		data() {
			return {
				imageList:[],
				img_list_type: true,
				let_run: '',
				user_name: '',
				talname: '',
				http_address: 'http://api.sibanyun.com:8000',
			}
		},
		mounted() {
			if(this.echodata){
				this.imageList = this.echodata.split(',');
			}
			if(this.imageList.length > 2){
				this.img_list_type = false;
			}
			
			// 获取用户选填接口地址
			if(uni.getStorageSync('curl_port')) {
				this.http_address = "http://" + uni.getStorageSync('curl_port').curlname + ":" + uni.getStorageSync('curl_port').curlport;
			}else if(uni.getStorageSync('curl_port_sort')){
				this.http_address = "http://" + uni.getStorageSync('curl_port_sort');
			}else {
				this.http_address = "http://api.sibanyun.com:8000";
			}
			
			// 获取用户信息
			getUserInfo().then(item => {
				if(item.code == 200){
					this.user_name = item.data.companyName;
					this.talname = item.data.name;
				}
			})
		},
		methods: {
			// 图片删除
			imgClose(val){
				let _this = this;
				console.log(this.imageList)
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success(rst) {
						if(rst.confirm){
							_this.imageList.splice(val,1);
							uni.showToast({
								title: '删除成功！',
								icon: 'none'
							})
							// 数组删除
							if(_this.echodata){
								_this.$emit('dellist',_this.imageList)
							}else{
								_this.$emit('delarray',val)
							}
							if(_this.imageList.length < 3){
								_this.img_list_type = true;
							}
						}else{
							console.log('取消')
						}
					}
				})
				if(this.imageList.length < 3){
					this.img_list_type = true;
				}
			},
			
			// 文件上传
			upload(val){
				let _this = this;
				let token = {'Access-Token':uni.getStorageSync('token')}
				uni.uploadFile({
					 url : _this.http_address + '/uploadFile',
					 filePath: val,
					 name: 'file', 
					 formData: {
					  'user': 'test'
					 },
					 header: token,
					 success: function (uploadFileRes) {
						 console.log(uploadFileRes)
						_this.$emit('uplodefile',JSON.parse(uploadFileRes.data).url)
					 }
				});
			},
			
			
			// 选择图片
			chooseImage() {
				
				uni.chooseImage({
					count: this.limit,				// 限制的图片数量
					sizeType: ['original', 'compressed'],		// original 原图，compressed 压缩图，默认二者都有 
					sourceType: ['camera'],// album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						var imgPathList = res.tempFilePaths;
						if(imgPathList.length > 0){
							this.addImages(imgPathList);
						}
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						if("chooseImage:fail cancel" == err.errMsg){
							uni.showToast({
								icon:'none',
								title:'取消了选择'
							}); 
						}else{
							// #ifdef MP
							uni.getSetting({
								success: (res) => {
									let authStatus = res.authSetting['scope.album'];
									if (!authStatus) {
										uni.showModal({
											title: '授权失败',
											content: '系统上传需要从您的相册获取图片，请在设置界面打开相关权限',
											success: (res) => {
												if (res.confirm) {
													uni.openSetting();
												}
											}
										})
									}
								}
							})
							// #endif
						}
					}
				});
				

			},
			// 添加图片
			addImages(filePaths){
				if(filePaths.length > 0){
					var fillTexts = [];
					fillTexts.push('签到信息');
					fillTexts.push("时间：" + this.getNowTime());
					fillTexts.push("业务员：" + this.talname);
					// fillTexts.push(this.user_name);
					fillTexts.push("位置：" + this.citys);
					fillTexts.push("客户：" + this.customer);
					// 添加水印
					this.$refs.watermark.addWaterMark({
						filePaths,
						fillTexts
					});
				}
			},
			// 放大预览
			imgPreview(index) {
				console.log('imgPreview', index)
				uni.previewImage({
					urls: this.imageList,
					current: index,
					loop: true,
				});
			},
			
			/**
			 * 水印添加回调，在H5平台下，filePath 为 base64
			 */
			waterMark(filePath){
				
				this.imageList.push(filePath);
				this.upload(filePath)
				if(this.imageList.length > 2){
					this.img_list_type = false;
				}
				
			},
			/**
			 * 获取当前时间
			 */
			getNowTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				return (year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
			},
			
		}
	}
</script>

<style scoped lang="scss">
.img-close {
	position: absolute;
	z-index: 10;
	background-color: #848079;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	text-align: center;
	margin: 2px 0 0 57px;
	color: #fff;
	i {
		position: absolute;
		right: 2px;
		top: 2px;
	}
}	
	
.img-list{
	background: #fff;
	height: 80px;
	width: 80px;
	margin: 5px 0 0 8%;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	overflow: hidden;

}

.img_st {
	height: 80px;
	width: 80px;
	line-height: 80px;
}

.img-out {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: auto;
}

.img-list-add {
	text-align: center;
	height: 80px;
	width: 80px;
	line-height: 80px;
	i {
		font-size: 40px;
		color: #0098EF;
	}
}

</style>

